import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetFooter,
  SheetClose
} from '../../components/ui/sheet';
import { Button } from '../../components/ui/button';

const meta: Meta<typeof Sheet> = {
  title: 'UI/Sheet',
  component: Sheet,
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof Sheet>;

export const Right: Story = {
  render: () => (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">从右侧打开</Button>
      </SheetTrigger>
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>编辑个人资料</SheetTitle>
          <SheetDescription>
            在此处更新您的个人信息。点击保存按钮保存更改。
          </SheetDescription>
        </SheetHeader>
        <div className="grid gap-4 py-4">
          <div className="grid grid-cols-4 items-center gap-4">
            <label htmlFor="name" className="text-right">
              姓名
            </label>
            <input
              id="name"
              className="col-span-3 h-10 rounded-md border px-3"
              defaultValue="张三"
            />
          </div>
          <div className="grid grid-cols-4 items-center gap-4">
            <label htmlFor="username" className="text-right">
              用户名
            </label>
            <input
              id="username"
              className="col-span-3 h-10 rounded-md border px-3"
              defaultValue="zhangsan"
            />
          </div>
        </div>
        <SheetFooter>
          <SheetClose asChild>
            <Button type="submit">保存更改</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  ),
};

export const Left: Story = {
  render: () => (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">从左侧打开</Button>
      </SheetTrigger>
      <SheetContent side="left">
        <SheetHeader>
          <SheetTitle>导航菜单</SheetTitle>
          <SheetDescription>
            快速访问应用程序的主要功能。
          </SheetDescription>
        </SheetHeader>
        <div className="flex flex-col gap-3 py-4">
          <Button variant="ghost" className="justify-start">首页</Button>
          <Button variant="ghost" className="justify-start">产品</Button>
          <Button variant="ghost" className="justify-start">服务</Button>
          <Button variant="ghost" className="justify-start">关于我们</Button>
          <Button variant="ghost" className="justify-start">联系我们</Button>
        </div>
      </SheetContent>
    </Sheet>
  ),
};

export const Top: Story = {
  render: () => (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">从顶部打开</Button>
      </SheetTrigger>
      <SheetContent side="top">
        <SheetHeader>
          <SheetTitle>通知设置</SheetTitle>
          <SheetDescription>
            配置您希望接收的通知类型。
          </SheetDescription>
        </SheetHeader>
        <div className="flex flex-row gap-4 py-4 justify-center">
          <Button variant="outline">电子邮件</Button>
          <Button variant="outline">短信</Button>
          <Button variant="outline">应用内通知</Button>
        </div>
        <SheetFooter>
          <SheetClose asChild>
            <Button>保存设置</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  ),
};

export const Bottom: Story = {
  render: () => (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">从底部打开</Button>
      </SheetTrigger>
      <SheetContent side="bottom">
        <SheetHeader>
          <SheetTitle>分享</SheetTitle>
          <SheetDescription>
            选择分享方式
          </SheetDescription>
        </SheetHeader>
        <div className="flex flex-row gap-4 py-4 justify-center">
          <Button variant="outline">微信</Button>
          <Button variant="outline">微博</Button>
          <Button variant="outline">QQ</Button>
          <Button variant="outline">复制链接</Button>
        </div>
      </SheetContent>
    </Sheet>
  ),
};
